import {Icon, Tooltip, Tag, Card, Alert, Typography} from 'antd';
import React from 'react';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-react/locale';
import Avatar from './AvatarDropdown';
import HeaderSearch from '../HeaderSearch';
import SelectLang from '../SelectLang';
import styles from './index.less';
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {TestArrError} from "@/utils/preventError";
import router from "umi/router";
import {Link} from "umi";

const ENVTagColor = {
  dev: 'orange',
  test: 'green',
  pre: '#87d068',
};

const GlobalHeaderRight = props => {
  let titleName=[]
  function findPathName(path) {
    if(path=="/"||typeof path !== "string"){
      return []
    }
    let arr=path.split("/")
    let arr1=[]
    arr.splice(0,1)
    // console.log(arr)
    arr.map((item,index)=>{
      let str=""
      arr.map((item1,index1)=>{
        if(index1<=index){
          // console.log(str)
          str=str+"/"+item1
          // console.log(str)
        }
      })
      arr1[index]=str
      // console.log(arr1[index])
    })
    let sourceArr=TestArrError(props.route.children)
    // console.log(props.route)
    arr1.map((item,index)=>{
      sourceArr.map((item1,index1)=>{
        if(item==item1.path){
          titleName.push(item1.name)
          // console.log(titleName)
        }
        if(item1.children!==undefined){
          item1.children.map((item2,index2)=>{
            if(item==item2.path){
              titleName.push(item2.name)
            }
          })
        }
      })
    })
    // console.log(titleName)
    return titleName
  }
  const { theme, layout } = props;
  let className = styles.right;
  let PageHeader=styles.pageHeader
//location, route routes
  if (theme === 'dark' && layout === 'topmenu') {
    className = `${styles.right}  ${styles.dark}`;
  }
  let arr=TestArrError(props.route.children)
  let title=""
  arr.map((item,index)=>{
    if(item.path==props.location.pathname){
      title =item.name
      return
    }
    if(item.children!==undefined){
      item.children.map((c,index1)=>{
        if(c.path==props.location.pathname){
          title=c.name
          return
        }
      })
    }
  })
  // console.log(arr,title)
  return (
    <div className={className}>
      <div className={PageHeader}>
        <PageHeaderWrapper>
          <div className={styles.title}>
            <Link to="/" style={{color:"#000000A6",width:'30px'}}>{title?'首页 ':null}</Link>
            {/*<span style={{cursor:'pointer'}} onClick={()=>{*/}
            {/*  router.go("/")*/}
            {/*}}>{title?'首页 /':null}</span>*/}
            <span className={styles.span}>{findPathName(props.location.pathname).map((item,index)=>{
              return  <span>&nbsp;&nbsp;/&nbsp;&nbsp;{item}</span>
            })}</span>
          </div>
        </PageHeaderWrapper>
      </div>
      <Avatar/>
      {REACT_APP_ENV && <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>}
      {/*<SelectLang className={styles.action} />*/}
    </div>
  );
};

export default connect(({ settings }) => ({
  theme: settings.navTheme,
  layout: settings.layout,
}))(GlobalHeaderRight);
